<!--<template>-->
<!--  <div-->
<!--      :class="['custom-step__center', currentStatus]"-->
<!--      @click="stepClick">-->
<!--    &lt;!&ndash;图标 线&ndash;&gt;-->
<!--    <div  :class="'custom-step__head__'+direction">-->
<!--      <slot name="icon">-->
<!--        <img-->
<!--            :src="currentIcon.icon"-->
<!--            :class="['custom-status__icon', {'wait-icon': currentStatus === 'inactive'} ]"-->
<!--        />-->
<!--        &lt;!&ndash;线&ndash;&gt;-->
<!--        <div :class="['custom-step__line', {'active_horizontal': currentStatus === 'finish'}, direction]"></div>-->
<!--      </slot>-->
<!--    </div>-->
<!--    &lt;!&ndash;图标标题&ndash;&gt;-->
<!--    <slot name="title">-->
<!--      <div-->
<!--          :class="['custom-step__title']"-->
<!--          :style="{'&#45;&#45;active-color': currentIcon.color}">-->
<!--        {{title}}-->
<!--      </div>-->
<!--    </slot>-->
<!--  </div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--  props: {-->
<!--    title:{ //标题-->
<!--      type:String,-->
<!--      default:''-->
<!--    },-->
<!--    status: { //当前步骤状态，不设置则用steps来设置-->
<!--      type:String,-->
<!--      default: ''-->
<!--    },-->
<!--    inactiveColor: { //未激活状态颜色-->
<!--      type:String,-->
<!--      default:'#f0f0f0'-->
<!--    },-->
<!--    activeColor: { //激活状态颜色-->
<!--      type:String,-->
<!--      default:'#1890ff'-->
<!--    },-->
<!--    finishColor: { //已完成状态颜色-->
<!--      type:String,-->
<!--      default:'1890ff'-->
<!--    },-->
<!--    inactiveIcon: { // 未激活状态图标-->
<!--      type: String,-->
<!--      default: require('./icons/inactive.png')-->
<!--    },-->
<!--    activeIcon: { // 激活状态图标-->
<!--      type: String,-->
<!--      default: require('./icons/active.png')-->
<!--    },-->
<!--    finishIcon: { // 已完成状态图标-->
<!--      type: String,-->
<!--      default: require('./icons/active.png')-->
<!--    }-->

<!--  },-->
<!--  //inject选项来接收数据/方法-->
<!--  inject: ['direction','active'],-->
<!--  data() {-->
<!--    return {-->
<!--      index: -1,-->
<!--      currentStatus:''-->
<!--    }-->
<!--  },-->
<!--  computed:{-->
<!--    currentIcon() {-->
<!--      const statusMap = {-->
<!--        'inactive':{-->
<!--            color:this.inactiveColor,-->
<!--            icon:this.inactiveIcon-->
<!--        },-->
<!--        'active': {-->
<!--          color: this.activeColor,-->
<!--          icon: this.activeIcon-->
<!--        },-->
<!--        'finish': {-->
<!--          color: this.finishColor,-->
<!--          icon: this.finishIcon-->
<!--        },-->
<!--        'default': {-->
<!--          color: this.inactiveColor,-->
<!--          icon: this.inactiveIcon-->
<!--        }-->
<!--      }-->
<!--      return statusMap[this.currentStatus] || statusMap.default-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    // 获取当前组件的 index-->
<!--    // 每一个组件都有自己的唯一的 uid 可以做为组件判断值-->
<!--    this.index = this.$parent.$children.findIndex(e => e._uid === this._uid)-->
<!--    // 动态监听 父组件的active变化-->
<!--    this.$watch('$parent.active', val => this.updateStatus(val), {immediate: true})-->
<!--  },-->
<!--  methods: {-->
<!--    updateStatus(parentActive) {-->
<!--      // 如果传入当前步骤状态则用当前状态-->
<!--      if (this.status) {-->
<!--        this.currentStatus = this.status-->
<!--        return-->
<!--      }-->
<!--      // 如果当前组件index 与 父组件的active值相等 则是处于 激活状态-->
<!--      // 如果当前组件index 小于 父组件的active值 则是已完成状态-->
<!--      // 就如果都不是、默认未完成状态-->
<!--      if (this.index === parentActive) {-->
<!--        this.currentStatus = 'active'-->
<!--      } else if (this.index < parentActive) {-->
<!--        this.currentStatus = 'finish'-->
<!--      } else {-->
<!--        this.currentStatus = 'inactive'-->
<!--      }-->
<!--    },-->

<!--    // 点击step事件-->
<!--    stepClick() {-->
<!--      this.$parent.$emit('click-step', this.index)-->
<!--    },-->
<!--  }-->
<!--}-->
<!--</script>-->
<!--<style lang="scss" scoped>-->
<!--/*标题*/-->
<!--.custom-step__title {-->
<!--  font-size: 14px;-->
<!--  color: #909399;-->
<!--}-->

<!--.custom-step__center {-->
<!--  flex-basis: 50%;-->
<!--}-->

<!--.custom-step__center .custom-step__line {-->
<!--  position: absolute;-->
<!--  right: -50%;-->
<!--  left: 50%;-->
<!--  height: 1px;-->
<!--  z-index: 0;-->
<!--  &.horizontal {-->
<!--    border-top: 2px solid #CAD6EE;-->
<!--  }-->
<!--}-->

<!--.active_horizontal {-->
<!--  border-top: 2px solid #3D7BED !important;-->
<!--}-->

<!--.custom-step__center:last-of-type .custom-step__line {-->
<!--  display: none; /*最后一个icon的线隐藏掉*/-->
<!--}-->

<!--.custom-step__center .custom-step__title {-->
<!--  text-align: center;-->
<!--  margin-top: 8px;-->
<!--  font-weight: 500;-->
<!--}-->

<!--.custom-step__center .custom-step__head__horizontal {-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--  align-items: center;-->
<!--  position: relative;-->
<!--}-->

<!--/*动态标题*/-->
<!--.inactive, .active, .finish {-->
<!--  & .custom-step__title {-->
<!--    color: var(&#45;&#45;active-color);-->
<!--  }-->
<!--}-->

<!--.custom-status__icon {-->
<!--  width: 16px;-->
<!--  height: 16px;-->
<!--  z-index: 1;-->
<!--}-->

<!--.wait-icon {-->
<!--  padding: 4px;-->
<!--  box-sizing: border-box;-->
<!--  z-index: 1;-->
<!--}-->
<!--</style>-->